import { View, Text,Image,Picker,AtList } from '@tarojs/components'
import { AtInput, AtForm,AtTag,AtToast,AtMessage,AtButton} from 'taro-ui'
import { useState,useEffect } from 'react'
import Taro, { getCurrentInstance } from '@tarojs/taro'
import HTTP from '../../../service/api'
import './newaddress.less'

const Newaddress=()=>{
    const [region,setSelector]=useState(['广东省', '广州市', '海珠区'])
    const [customItem]=useState('全部')
    const bindRegionChange=(e)=>{
        setSelector(e.target.value)
    }
    const [state,setState]=useState(true)
    const setting=(ev)=>{
        setState(!state)
    }
    const [username,setusername]=useState('')
    const [phone,setPhone]=useState('')
    const [address,setAdd]=useState('')

    const setname=(e)=>{
        setusername(e)
    }
    const setphone=(e)=>{
        setPhone(e)
    }
    const setaddress=(e)=>{
        setAdd(e)
    }
    const [tit,settit]=useState('')
    useEffect(()=>{
        const tit=getCurrentInstance().router.params.name;
        settit(tit)
    })

    const success=(msg)=>{
        Taro.atMessage({
            'message': '添加成功',
            'type': msg,
          })
    }
    //添加操作
    const insert=()=>{
        Taro.request({
            url:HTTP.api2+'/userAddress/addUserAddress',
            method:'POST',
            header:{
                'content-type':'application/x-www-form-urlencoded'
            },
            data:{
                uid:'1',
                username:username,
                phone:phone,
                shippingAddress:address
            }
        }).then(res=>{
            console.log(res);
            if (res.data.code=='200') {
                setTimeout(()=>{
                    Taro.navigateTo({
                        url:'/pages/address/address',
                    })
                },5000)
                Taro.atMessage({
                    'message': '添加成功',
                    'type': 'success',
                  })
            }else{
                Taro.atMessage({
                    'message': '添加失败',
                    'type': 'error',
                  })
            }
        })

    }
    return(
        <View className='addBox'>
            <AtMessage />
            <View style={{fontSize:'30px',fontWeight:'bold'}}>{tit}</View>
            <AtForm className='addInfo' style={{border:'none'}}>
                <AtInput
                    name='username'
                    title='联系人:'
                    type='text'
                    placeholder='联系人名称'
                    value={username}
                    onChange={setname}
                />
                <AtInput
                    name='phone'
                    title='电        话:'
                    type='phone'
                    placeholder='一定要填喔~'
                    value={phone}
                    onChange={setphone}
                />
                <View className='pick'>
                    <picker mode="region" onChange={bindRegionChange} value={region} onColumnChange={customItem}>
                        <view class="picker">
                        地    址：{region[0]},{region[1]},{region[2]}
                        </view>
                    </picker>
                </View>
                <AtInput
                    name='shippingAddress'
                    title='详   情:'
                    type='text'
                    placeholder='记得把住的地址写清楚喔~'
                    value={address}
                    onChange={setaddress}
                />
            </AtForm>
            <Text style={{fontSize:'16px',fontWeight:'bold'}}>设置默认</Text>
            <AtTag size='small' onClick={setting} className={state?'at-tag':'at-tag1'}>默认</AtTag>
            <view className='addDZ' onClick={insert}>{tit}</view>
    </View>
    )
}
export default Newaddress;